<template>
	<view class="component">
		<view class="titleWrap flex">
            <view class="title font15 fontBold">开盘信息</view>
            <view class="more flex font12 col-grey"></view>
        </view>

		<block v-if="hasPriceTypes.length > 0">
			<view class="msgItem" v-for="priceItem in hasPriceTypes" :key="priceItem.value">
				<text class="tit col-grey">{{priceItem.label}}单价：</text>
				<text class="fontBold">{{priceItem.price}}元/m²</text>
			</view>
		</block>

		<view class="msgItem" v-if="detail.ren">
			<text class="tit col-grey">人才房：</text>
			<view class="valueBox">
				{{detail.ren}}
			</view>
		</view>

		<view class="msgItem" v-if="detail.sell_house_type?.length > 0">
			<text class="tit col-grey">销售户型：</text>
			<view class="valueBox">
				<block v-for="(item, index) in detail.sell_house_type" :key="index">
					<text class="right-5">{{item}}</text>
				</block>
			</view>
		</view>

		<view class="msgItem" v-if="detail.size">
			<text class="tit col-grey">户型建面：</text>
			<view class="valueBox">
				{{detail.size}}
			</view>
		</view>

		<view class="msgItem" v-if="detail.building">
			<text class="tit col-grey">入市房源：</text>
			<view class="valueBox">
				{{detail.building}}
			</view>
		</view>

		<view class="msgItem" v-if="detail.get_time">
			<text class="tit col-grey">交房时间：</text>
			<view class="valueBox">
				{{detail.get_time}}
			</view>
		</view>

		<view class="msgItem" v-if="detail.kai_time">
			<text class="tit col-grey">开盘时间：</text>
			<view class="valueBox">
				{{detail.kai_time}}
			</view>
		</view>

		<view class="msgItem" v-if="detail.buy_start_time">
			<text class="tit col-grey">认购时间：</text>
			<view class="valueBox">
				{{detail.buy_start_time.substring(0, 10)}}
			</view>
		</view>

		<view class="msgItem" v-if="detail.get_time">
			<text class="tit col-grey">交房时间：</text>
			<view class="valueBox">
				{{detail.get_time}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	const props = defineProps({
		detail: {
			type: Object,
			default: () => ({})
		}
	});

	// 房屋类型参考价格
	let hasPriceTypes = computed(() => {
		return props.detail?.price_list?.filter(item => item.price > 0) || [];
	});
</script>

<style lang="scss" scoped>
.component{
	margin: 50rpx 22rpx 0 22rpx;
	.titleWrap{
		justify-content: space-between;
	}
	.msgItem{
		margin-top: 25rpx;
		line-height: 1.3;
		.tit{
			width: 140rpx;
		}
		.valueBox{
			width: calc(100% - 175rpx);
			display: inline-block;
			vertical-align: text-top;
		}
	}
}
</style>
